/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * Module.css
 * All specific styles that relate to a view page or partial should occur here.  All styles should be namespaced by atlest the style you want to alter,
 * and it's partial's wrapping classname.  In the event the class you want to apply has no parent with a specific class name, default to the page's specific
 * body id name
 *
 * Measurements should all be in "em" unless it is a border.
 * 1em = 12px
 *
 * Quick guide to conversions:
 *      1px = .0833em
 *      2px = .1666em
 *      4px = .25em
 *      5px = .4166em
 *      6px = .5em
 *      10px = .8333em
 *      11px = .9166em
 *      12px = 1em
 *      14px = 1.1666em
 *      16px = 1.3333em
 *      18px = 1.25em
 */

@import "../new_stylesheets/shared/mixins";

/*
* Agents
*/
#agents .entity_title {
  float: left;
}

#agents .content_wrapper_outer {
  clear: both;
}

.compare_pipeline {
  font-size: 1.1em;
}

.compare_pipeline a {
  background: image_url("g9/icons/icon_compare_16.png") transparent no-repeat;
  padding-left: 20px;
}

.compare_pipeline a:hover {
  background: image_url("g9/icons/icon_compare_16_hover.png") transparent no-repeat;
}

.compare_pipeline.dashboard a {
  display: inline;
}

.compare_pipeline.dashboard {
  font-size: 12px;
}

.compare_pipeline label {
  background: image_url("g9/icons/icon_compare_16.png") transparent no-repeat;
  cursor: default;
  padding-left: 20px;
  opacity: 0.5;
  display: inline;
}

.compare_pipeline_page .triggered_by {
  float: left;
  margin-top: -10px;
}

.pipeline_flow {
  padding-bottom: 30px;
}

.stage_history .compare_pipeline {
  position: absolute;
  bottom: 13px;
  right: 10px;
}

.compare_pipeline a .has_go_tip {
  cursor: pointer;
}

.run_details .compare_pipeline {
  margin-left: 8px;
}

.separator {
  border-right: 1px solid gray;
}

/**
 * Stage Editor
 */
.fieldset .form_item .form_item_block select {
  float: none;
  margin-left: 1px;
  margin-bottom: 1.167em;
}

/*
* Environments
*/

.environments {
  clear: both;
}

/* define the layout for the env variables rows */

.variables h4,
.params h4 {
  float: left;
  width: 250px;
  margin-bottom: 5px;
  font-size: larger;
}

.environment .pipeline .deploy {
  margin-top: 10px;
}

.environment .pipeline .deploy form {
  float: left;
}

.pipeline_selector {
  padding: 4px 0;
}

.pipeline_selector label.inline {
  cursor: pointer;
}

#comparison .pipeline {
  padding-top: 4px;
  padding-bottom: 4px;
}

/*
 Hidereveal
*/
.hidereveal_collapsed .hidereveal_content {
  display: none;
}

.hidereveal_expander {
  padding-left: 14px;
  margin: 3px 0;
  cursor: pointer;
  background: image_url("g9/icons/arrow_open.png") 0 50% no-repeat transparent;
  display: block;
}

.hidereveal_collapsed .hidereveal_expander {
  background: image_url("g9/icons/arrow_closed.png") 0 50% no-repeat transparent;
}

a.hidereveal_expander,
a.hidereveal_collapsed {
  color: #333;
}

/*
* Stage Detail Page
*/

.page_title_bar .run_results .run,
.page_title_bar .run_details .schedule_info,
.page_title_bar .other_runs a {
  float: left;
  margin-right: 1em;
}

a#show_other_stage_runs {
  background: image_url("g9/icons/arrow_open.png") no-repeat right;
  padding-right: 16px;
}

.page_title_bar .run_results .result,
.page_title_bar .run_details .duration {
  float: left;
}

.page_title_bar .run_results .result {
  padding-right: 10px;
  border-right: 1px solid #a5a5a5;
}

.page_title_bar .run_details .duration {
  padding-right: 10px;
  border-right: 1px solid #a5a5a5;
}

.page_title_bar .color_code {
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  float: left;
}

.page_title_bar .page_status_bar .enhanced_dropdown {
  width: auto;
}

* + html .page_title_bar .page_status_bar .enhanced_dropdown {
  width: 13.5em;
}

.page_title_bar .other_runs {
  margin: 10px;
}

* + html .page_title_bar .other_runs,
* + html .page_title_bar .other_runs li {
  width: 100%;
}

.page_title_bar .status ul li {
  display: block;
  margin: 0.5em 0;
}

.page_title_bar .run ul li {
  display: block;
  clear: left;
}

.micro_content_root li > div {
  margin-top: 5px;
}

.micro_content_root li > span {
  float: right;
}

/**
 * Jobs
 */

.jobs_summary.stage_with_rerun_jobs .is_rerun .rerun_job_icon {
  margin: 5px 0 0 -15px;
  position: absolute;
}

.jobs_summary.stage_with_rerun_jobs .not_rerun {
  background-color: #eee;
}

.content #tab_container div.jobs {
  clear: left;
  float: left;
  width: 180px;
  border-right: 1px solid #ccc;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.content #tab_container .materials_overview_wrapper {
  margin-left: 200px;
  margin-top: 10px;
}

.overview_widget .job_grouping {
  margin-bottom: 5px;
  padding-right: 10px;
  clear: left;
}

.overview_widget .job {
  clear: both;
  margin: 5px 0;
  margin-left: 15px;
  width: 100%;
}

.overview_widget .job a {
  float: left;
  margin-right: 1em;
}

.job .progress_bar_container {
  float: left;
  width: 14em;
  height: 10px;
  border: 1px solid #ccc;
  background: #fff;
  margin-top: 5px;
}

.job .progress_bar_container div {
  height: 100%;
  background: #999 image_url("g9/backgrounds/bg_status_gradient.png") repeat-x;
}

.overview_widget .job .elapsed_time {
  white-space: nowrap;
  clear: both;
}

/*
* Materials - Pipeline Details
*/
#stages .content .changes {
  clear: both;
  border-top: 1px solid #ccc;
  margin-top: 15px;
  padding-top: 15px;
}

#stages .build_cause {
  float: left;
  width: 100%;
}

#stages .build_cause .material {
  float: left;
  clear: both;
  width: 100%;
}

#stages .build_cause .material_name {
  padding: 6px;
  font-size: 12px;
  background-color: #eee;
  border-radius: 3px;
}

#stages .build_cause .change {
  clear: both;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

#stages .build_cause .change div {
  padding-bottom: 5px;
  clear: both;
  overflow: hidden;
}

#stages .build_cause dl {
  clear: both;
}

#stages .build_cause dt {
  float: left;
  padding: 5px 0;
  padding-right: 5px;
  font-weight: bold;
}

#stages .build_cause dd {
  float: left;
  padding: 5px 0;
}

#stages .comment {
  clear: both;
}

#stages .build_cause .modified_files {
  clear: both;
}

#stages .build_cause .modified_files div {
  padding: 5px 5px 5px 20px;
  background-repeat: no-repeat;
  background-position: 0 3px;
}

#stages .build_cause .modified_files .added {
  background-image: image_url("g9/icons/icon_add.png");
}

#stages .build_cause .modified_files .deleted {
  background-image: image_url("g9/icons/icon_delete.png");
}

#stages .build_cause .modified_files .modified {
  background-image: image_url("g9/icons/icon_modified.png");
}

#stages .build_cause .changed .material_name {
  background: #eee image_url("g9/icons/icon_info_16.png") no-repeat 6px 4px;
  padding-left: 28px; /* padding-right: 1em; */
}

/*
 * Changes popup
 */

.change .comment p {
  margin-bottom: 8px;
}

#pipelines .enhanced_dropdown .list_table td {
  word-break: break-all;
  max-width: 300px;
}

.change td {
  vertical-align: top;
}

.sub_tabs_container li.updated a,
.sub_tabs_container li.updated a:hover {
  font-weight: bold;
  font-style: italic;
}

.spinny {
  background: image_url("g9/icons/spinny_white_16.gif") no-repeat 0 50% transparent;
  width: 16px;
  height: 16px;
  display: block;
}

/* Pipeline unlocking */
.locked_instance a {
  font-size: 1em;
}

.fieldset h3 {
  padding: 5px 0;
  color: #000;
  font-weight: bold;
}

fieldset.two-cols button {
  vertical-align: middle;
}

/**
 * Admin - Edit Pipeline
 */

/* buttons */
#group_edit_form .form_buttons .submit,
#group_edit_form .form_buttons .reset_button,
#pipeline_snippet_view #view_group .link_as_button,
#pipeline_snippet_edit #edit_group .form_buttons .link_as_button {
  min-width: 120px;
  box-sizing: border-box;

  font-size: 11px !important;
  padding: 7px 10px;
}

#group_edit_form .form_buttons .reset_button {
  height: auto;
}

.template_form_error {
  margin-left: 0;
  padding-top: 10px;
}

li.template_form_error {
  margin-left: 25px;
  list-style: disc;
  padding-top: 0;
  display: list-item;
  float: none;
}

/* nav */

.admin_workspace .pipeline_header {
  float: none;
}

/* css hack to highlight selected nav item */
.general li#general a,
.materials li#materials a,
.stages li#stages a,
.environment_variables li#environment_variables a,
.parameters li#parameters a,
.permissions li#permissions a,
.stage li#stage a,
.jobs li#jobs a,
.settings li#settings a,
.tasks li#tasks a,
.artifacts li#artifacts a {
  color: black;
  background: #fff;
}

/* clicky admin - job tabs */

.tabs thead tr th.path,
.tabs tbody.tabs tr td.name_value_cell.path {
  padding-left: 5px;
  padding-right: 5px;
}

.tabs thead tr th {
  padding-bottom: 5px;
}

.tabs h4 {
  margin-bottom: 5px;
  font-size: larger;
  float: left;
}

/* artifacts wizard */

.artifact h4 {
  margin-bottom: 5px;
  font-size: larger;
  float: left;
}

.artifact h4.src {
  width: 45px;
}

.artifact h4.dest {
  width: 75px;
}

.artifact h4.type {
  width: 32px;
}

.artifact select {
  margin-right: 10px;
}

/* Value Stream Map - styles */

#body_bg.vsm #body_content {
  background: #eee;
}

#vsm-container {
  position: relative;
  background: #eee;
  overflow: auto;
  margin: 0 5px 5px 5px;
}

#vsm-container a {
  border: none;
}

#vsm-container .vsm-entity.dummy {
  visibility: hidden;
}

#vsm-container .highlight {
  background: #f2f2f2;
  width: 253px;
  min-height: 300px;
  position: absolute;
  left: 0;
}

.vsm-entity {
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  font: 13px arial;
  color: #666;
  white-space: nowrap;
  overflow: visible;
  border-radius: 4px;
  width: 190px;
  height: 110px;
  padding: 10px 10px 30px 10px;
}

.vsm-entity h3,
.vsm-entity h4 {
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: default;
}

.vsm-entity h3 {
  background: image_url("andare/ico-16x16.png") no-repeat scroll 0 0 transparent;
  padding: 0 20px 8px 12px;
  border-bottom: 1px dotted #999;
  font-size: 13px;
  line-height: 16px;
}

.vsm-entity h3.restricted,
.vsm-entity h3.deleted {
  opacity: 0.7;
}

.vsm-entity .warning {
  background: image_url("g9/icons/icon_warning_16.png") no-repeat 0 0;
  color: red;
  padding-bottom: 10px;
  font-weight: bold;
  padding-left: 21px;
  line-height: 17px;
}

.vsm-entity.conflicts {
  border-color: red;
  border-width: medium;
}

.vsm-entity h3 a {
  cursor: pointer;
}

.material h3 {
  padding-bottom: 0;
  border: 0 none;
}

.vsm-entity h4 {
  font-size: 11px;
  height: 16px;
  line-height: 16px;
}

.vsm-entity h4 .label {
  background: image_url("andare/ico-16x16.png") no-repeat scroll 0 -20px transparent;
  display: inline-block;
  padding: 0 0 5px 18px;
}

.vsm-entity .show-more {
  text-align: center;
  margin: 3px 0;
  position: relative;

  &::before {
    content: "";
    border-top: 1px solid #ccc;
    height: 1px;
    display: block;
    position: absolute;
    width: 100%;
    top: 7px;
  }
}

.vsm-entity .show-more a {
  font-size: 11px;
  padding: 0 5px;
  background: #fff;
  display: block;
  width: 60px;
  margin: 0 auto;
  position: relative;
}

.vsm-entity.current {
  box-shadow: 0 0 2px 2px #ccc;
  border: 2px solid #aaa;
  width: 230px;
  height: 150px;
}

.vsm-entity.hovered {
  border-color: #666;
}

.vsm-entity.pinned {
  border-color: #666;
}

.vsm-entity .material_type {
  background-image: none;
  padding-left: 0;
  font-size: 11px;
}

.vsm-entity .material_type {
  margin-bottom: 0;
}

.vsm-entity .actions {
  height: 30px;
  position: absolute;
  bottom: 5px;
  width: 200px;
  margin: 0 0 0 -5px;
}

.vsm-entity.pipeline .instances.expanded {
  float: none;
  height: 138px;
  overflow: auto;
}

.vsm-entity.pipeline .instances {
  float: none;
  height: 46px;
  overflow: hidden;
}

.vsm-entity.pipeline .instance {
  overflow: hidden;
  margin: 0 -3px 10px;
  padding-bottom: 5px;
  width: 192px;
  padding-left: 2px;
}

.vsm-entity.pipeline.current .instance {
  width: 237px;
}

.vsm-entity.pipeline.current .instance {
  margin-top: 15px;
}

.vsm-entity.pipeline.expanded {
  height: 195px;
  z-index: 1000;
  box-shadow: 2px 2px 3px 3px rgba(128, 128, 128, 20%);
  border: 1px solid #aaa;
}

.vsm-entity.pipeline.expanded .instances {
  height: 143px;
  overflow-y: auto;
}

.vsm-entity.pipeline.expanded.l {
  height: 270px;
}

.vsm-entity.pipeline.expanded.l .instances {
  height: 215px;
}

.vsm-entity.pipeline.expanded.xl {
  height: 263px;
  width: 210px;
}

.vsm-entity.pipeline.expanded.xl .instance {
  width: 193px;
}

.vsm-entity.pipeline.expanded.xl .instances {
  height: 212px;
  overflow: auto;
  overflow-x: hidden;
}

.vsm-entity.pipeline .stages {
  white-space: normal;
  margin-right: -4px;
  float: none;
}

.vsm-entity.pipeline .stages li {
  min-width: 10px;
  height: 12px;
  margin-top: 3px;
}

.vsm-entity.pipeline .stages li a {
  display: block;
}

.vsm-entity.pipeline .stages li.Cancelled a {
  background-repeat: no-repeat;
  background-position: center;
}

.vsm-entity.pipeline .message {
  white-space: normal;
  background: #f6f6f6;
  font-size: 11px;
  padding: 7px;
}

.material_revisions {
  border: 1px solid transparent;
  position: relative;
  height: 40px;
  width: 70px;
  clear: both;
  margin: 0 auto;
  z-index: 2;
}

.material_revisions,
.triangle {
  background-image: image_url("andare/thumbs-materials-100x100.png");
  background-repeat: no-repeat;
}

.triangle {
  background-position: -17px -5px;
  height: 15px;
  position: absolute;
  right: -4px;
  top: 0;
  width: 13px;
}

.material_revisions_label {
  position: relative;
  text-overflow: ellipsis;
  clear: both;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  padding: 3px;
  font-size: 10px;
  cursor: pointer;
}

#vsm-container > .instances {
  width: 320px;
  display: none;
  left: 0;
  position: absolute;
  top: 96px;
  z-index: 100;
  background-color: rgba(255, 255, 255, 100%);
  border: 1px solid #bbb;
  border-bottom: 0 solid #ccc;
  line-height: 1.5em;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 20%);
  padding-right: 0;
}

#vsm-container > .instances li {
  border-bottom: 1px solid #ccc;
  float: none;
  font-size: 11px;
  overflow: hidden;
  padding: 7px;
  text-overflow: ellipsis;

  &.instance {
    border-left: 2px solid #94399e;
  }
}

#vsm-container > .instances li:first-child {
  background: image_url("andare/comment-triangle.png") no-repeat scroll 77px 5px transparent;
  height: 0;
  border: 0 none;
  margin-top: -14px;
}

#vsm-container > .instances > .material_revision_header {
  border: 0 none;
  font-weight: bold;
  background-color: #eee;
}

#vsm-container > .instances li:nth-child(2) div {
  color: #666;
}

.vsm-entity.material,
.vsm-entity.material * {
  cursor: pointer;
}

.instances .icon,
.vsm-entity.material .icon {
  background: image_url("andare/ico-16x16.png") no-repeat scroll 0 0 transparent;

  padding-left: 20px;
}

.vsm-entity.pipeline.current .actions {
  width: 240px;
}

.vsm-entity.material {
  border-radius: 70px;
  height: 140px;
  width: 140px;
  box-sizing: border-box;
  z-index: 1;
}

.vsm-entity.material .actions {
  bottom: 0;
  text-align: center;
  width: 117px;
  margin: 0;
  height: 30px;
}

.vsm-entity.material .more {
  clear: both;
  color: black;
  cursor: pointer;
  padding: 0;
  height: 12px;
  line-height: 0.4em;
  overflow: hidden;
  text-align: center;
  margin-bottom: 5px;
  border-radius: 20px;
}

.vsm-entity.material .more:hover {
  background-color: #efefef;
}

.vsm-entity.material .actions button {
  float: none;
  margin: 0 auto;
}

.vsm-entity.material .actions .pin {
  margin-top: 5px;
}

.vsm-entity .pipeline_actions {
  position: absolute;
  right: -4px;
  top: 9px;
}

.pipeline_actions.has-warning {
  top: 39px;
}

.usercomment {
  line-height: 12px;
  margin-bottom: 3px;
  margin-top: 3px;
}

.instances .material-names {
  background-position: 0 0;
}

.instances .user {
  background-position: 0 -58px;
}

.instances .revision {
  background-position: 0 -20px;

  span {
    font-weight: 600;
    color: #333 !important;
  }
}

#vsm-container > .instances li div {
  white-space: nowrap;
  color: #444;
  text-overflow: ellipsis;
  overflow: hidden;
}

#vsm-container > .instances .author {
  text-align: right;
  color: #999;
  border-bottom: 1px #dedede solid;
  padding-bottom: 3px;
}

#vsm-container > .instances .author:last-child {
  border-bottom: none;
}

#vsm-container > .instances li div span {
  color: #999;
}

.material_revisions_label.one {
  border: 1px solid white;
  width: inherit !important;
  cursor: default;
}

.material_revisions.git {
  background-position: 10px -55px;
}

.material_revisions.mercurial {
  background-position: 10px -106px;
}

.material_revisions.subversion {
  background-position: 10px -207px;
}

.material_revisions.perforce {
  background-position: 10px -157px;
}

.material_revisions.tfs {
  background-position: 10px -257px;
}

.material_revisions.package {
  background-position: 10px -332px;
}

.material_revisions.scm {
  background: image_url("andare/icon-plugin-default.png") no-repeat center;
  background-size: 42px;
}

.material_names {
  padding: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  cursor: default;
  float: left;
  width: 160px;
}

.material_names span {
  background-color: #fefefe;
  margin: 2px 3px;
  display: inline-block;
  max-width: 50px;
  padding: 3px;
  cursor: default;
}

.dependency {
  stroke: #dedede;
  stroke-width: 2px;
  fill: none;
  cursor: pointer;
}

.dependency.hovered {
  stroke: #666;
}

.dependency.pinned {
  stroke: #999;
}

.pin {
  width: 16px;
  height: 16px;
  float: right;
  background: image_url("andare/ico-16x16.png") no-repeat scroll 0 -140px transparent;
  margin: 8px 5px 5px 0;
}

.pin:hover {
  background-position: 0 -160px;
  background-color: #666;
}

.pin.pinned {
  background-position: 0 -180px;
}

.pin.pinned:hover {
  background-position: 0 -160px;
  background-color: #666;
}

.pin.pinned:active {
  background-color: #eee;
}

#pre-loader-overlay {
  display: none;
}

#pre-loader-overlay .loading {
  height: 30px;
  width: 90px;
  background-image: image_url("andare/gears-loader.gif");
  background-color: #fff;
  border-radius: 5px;
  border: 8px solid #d4d4d4;
  top: 0;
  text-align: center;
  font-size: 1.2em;
  opacity: 0.8;
  right: 0;
  padding-top: 60px;
  background-position: 50% 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
}

/* VSM - Overlay */

#vsm-overlay {
  background: rgba(225, 225, 225, 50%);
  position: fixed;
  top: 93px;
  z-index: 1000;
  display: none;
}

#vsm-overlay .popup {
  z-index: 1001;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.pan {
  width: 200px;
  height: 150px;
  border: 1px solid #aaa;
  border-radius: 1px;
  position: absolute;
  bottom: 90px;
  right: 30px;
  opacity: 0.8;
  background-color: #e6e6e6;
  overflow: hidden;
  box-shadow: 0 0 2px 2px rgba(128, 128, 128, 30%);
}

.pan:hover {
  opacity: 0.9;
  border: 1px solid #888;
  box-shadow: 0 0 3px 3px rgba(128, 128, 128, 40%);
}

.pan canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

.pan .knob {
  cursor: pointer;
  width: 50px;
  height: 30px;
  position: absolute;
  z-index: 11;
  border: 1px solid #999;
  background: #fff;
  opacity: 0.7;
}

.pan .knob:hover {
  border: 1px solid #333;
}

.pan .constrainer {
  overflow: visible;
  position: relative;
  z-index: 11;
  background-color: rgba(0, 0, 0, 1%);
}

.wraptext {
  white-space: pre-wrap !important;
}

/*
* ======= ADD ALL NEW STYLES ABOVE THIS LINE.  ONLY FLOAT CLEARING SHOULD GO BELOW ============
*/

/*
* Float Clearing
*/
ul.variables::after,
.environments .stages::after,
.environment .pipeline .deploy::after,
.page_title_bar .other_runs li::after,
.overview_widget::after,
.overview_widget .job_grouping::after,
.stage_history .stage::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
